<template>
	<el-container class="el-c">
		<!-- 头部区域 -->
		<el-header>
			<div class="el-header-box">
				<img src="../assets/logo.png" alt="">
				<span>电商后台管理系统</span>
			</div>
			<el-button type="info" @click="logout">退出</el-button>
		</el-header>
		<!-- 页面主题区域 -->
		<el-container>
			<!-- 侧边栏 -->
			<el-aside :width="toggleList?'64px':'200px'">
				<div class="menuButton" @click="toggle">|||</div>
				<!-- 侧边栏菜单区 -->
				<el-menu background-color="#313743" :default-active="pathActive" :collapse='toggleList' router :collapse-transition="false" text-color="#fff" active-text-color="#359BFF" :unique-opened="true">
					<el-submenu v-for="item in menulist" :index="'/'+item.path" :key="item.id">
						<!-- 一级菜单模板区 -->
						<template slot="title">
							<i :class="iconList[item.id]"></i>
							<span>{{item.authName}}</span>
						</template>
						<!-- 二级菜单 -->
						<el-menu-item @click="path('/'+children.path)" :index="'/'+children.path" v-for="children in item.children" :key="children.id">
							<template slot="title">
								<i class="el-icon-menu"></i>
								<span>{{children.authName}}</span>
							</template>
						</el-menu-item>
					</el-submenu>
				</el-menu>
			</el-aside>
			<!-- 右侧内容 -->
			<el-main>
				<router-view></router-view>
			</el-main>
		</el-container>
	</el-container>
</template>

<script>
	export default {
		data(){
			return{
				menulist:[],
				iconList:{
					125:'iconfont icon-users',
					103:'iconfont icon-tijikongjian',
					101:'iconfont icon-shangpin',
					102:'iconfont icon-danju',
					145:'iconfont icon-baobiao'
				},
				toggleList:false,
				pathActive:''
			}
		},
		created() {
			this.getMuneList()
			this.pathActive = window.sessionStorage.getItem('path');
		},
		methods: {
			async getMuneList() {
					const {data:msg} = await this.$http.get('menus')
					if(msg.meta.status !== 200) return this.$message.error(msg.meta.msg)
					this.menulist = msg.data
			},
			logout() {
				window.sessionStorage.clear()
				this.$router.push('/login')
			},
			toggle(){
				this.toggleList = !this.toggleList
			},
			path(active){
				window.sessionStorage.setItem('path',active);
				this.pathActive = active
			}
		},
	}
</script>

<style>
	* {
		padding: 0;
		margin: 0;
		box-sizing: border-box;
	}
	.menuButton{
		background-color: #626e74;
		font-size: 10px;
		text-align: center;
		line-height: 26px;
		color: #fff;
		cursor: pointer;
		letter-spacing: 3px;
	}
	.iconfont{
		margin-right: 10px;
	}
	.el-aside .el-menu{
		border-right: 0;
	}
	.el-header,
	.el-footer {
		background-color: #363D40;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.el-aside {
		background-color: #313743;
	}

	.el-main {
		background-color: #E9EDF1;
	}

	.el-c {
		height: 100%;
	}

	.el-header-box {
		display: flex;
	}

	.el-header-box img {
		width: 50px;
		height: 50px;
		margin-top: 6px;
	}

	.el-header-box span {
		line-height: 60px;
		font-size: 30px;
		color: #fff;
	}
</style>
